<template>
  <div class="cart">
    <div id="app">
      <table class="table" >
        <tr>
          <td style="width:10%">
            <span v-if="isSelectAll == false"  @click="selectAll(),select=!select"><img src="../assets/images/icon_select.png">全选</span>
            <span v-else @click="selectNone(),select=!select"><img src="../assets/images/car.png">全选</span>
          </td>
          <td>商品信息</td>
          <td>单价</td>
          <td>数量</td>
          <td>金额</td>
          <td>操作</td>
        </tr>
        <tr v-for="(goods, index) in goodsList" :key="index">
          <td>
            <span v-if="goods.select==false"  @click="goods.select=!goods.select"><img src="../assets/images/icon_select.png"></span>
            <span v-else  @click="goods.select=!goods.select"><img src="../assets/images/car.png"></span>
          </td>
          <td class="">

              <div class="left"><img src="../assets/images/car.png" style="width: 1rem;height: 1rem;"></div>
              <div class="right">
                <h5 style="">{{goods.name}}</h5>
                <!-- <p>品牌：{{goods.brand}}  产地:{{goods.location}}</p> -->
                <!-- <p>规格/纯度:{{goods.size}}  起定量:{{goods.number}}</p> -->
                <!-- <p>配送仓储:{{goods.send}}</p> -->
              </div>
          </td>
          <td>￥{{goods.price | centToFen}}</td>
          <td>
            <a class="btn" @click="goods.num <= 100 ? 100 : goods.num--"  >-</a>
            <input type="text" class="numbers" v-model="goods.num" style="text-align: center;"/>
            <a class="btn" @click="goods.num++">+</a>
          </td>
          <!-- <td>{{goods.price}}</td> -->
          <td>￥{{goods.num*goods.price | centToFen}}</td>
          <td><a class="btn btn-danger" @click="deleteOne(index)">移除</a></td>
        </tr>
      </table>

      <p style="float: left;"><a class="btn btn-danger" @click="deleteGoods()">删除选中商品</a></p>
      <p class="total">已选商品{{getTotal.totalNum}}种，数量：{{getTotal.totalsum}}，合计（不含运费）：{{getTotal.totalPrice | centToFen}}</p>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      select: false,
      goodsList: [
        {
          name: '新生儿疾病筛查型Neonatal screening type',
          price: 888,
          num: 100
        },
        {
          name: '雪碧',
          price: 398,
          num: 100
        },
        {
          name: '芬达',
          price: 499,
          num: 100
        },
        {
          name: '美年达',
          price: 297,
          num: 100
        }
      ]
    }
  },
  methods: {
    selectAll: function () {
      for (var i = 0; i < this.goodsList.length; i++) {
        this.goodsList[i].select = true
      }
    },
    selectNone: function () {
      for (var i = 0; i < this.goodsList.length; i++) {
        this.goodsList[i].select = false
      }
    },
    deleteOne: function (index) {
      this.goodsList.splice(index, 1)
    },
    deleteGoods: function () {
      this.goodsList = this.goodsList.filter(function (item) { return !item.select })
    }

  },
  computed: {
    isSelectAll: function () {
      // <!--如果每一条数据的select都为true，返回true，否则返回false;-->
      return this.goodsList.every(function (val) { return val.select })
    },
    getTotal: function () {
      // <!--获取goodsList中select为true的数据。-->
      var _proList = this.goodsList.filter(function (val) { return val.select })
      var totalPrice = 0
      var totalsum = 0
      for (var i = 0, len = _proList.length; i < len; i++) {
        // <!--总价累加-->
        totalPrice += _proList[i].num * _proList[i].price
        totalsum += _proList[i].num
      }
      // <!--选择产品的件数就是_proList.length，总价就是totalPrice-->
      return {totalNum: _proList.length, totalPrice: totalPrice, totalsum: totalsum}
    }

  },
  mounted: function () {
    var _this = this
    this.goodsList.map(function (goods) {
      _this.$set(goods, 'select', false)
      console.log('_this.', _this.$set(goods, 'select', false))
    })
  },
  components: {

  }
}
</script>

<style scoped lang="less">
.cart{
  position: relative;
  top:1.5rem;
  font-size: .2rem;
}
#app{
  position: relative;
  left:.8rem;
}
.left{
    display: block;
    float: left;
    margin-top:.2rem;
    width: 1rem;
    height: 1rem;
    background: red
  }
  .right{
    display: block;
    background: green
  }
  .numbers{
    width: 40%;
    height:.3rem;
    border:1px solid rgb(107, 36, 102);
    border-radius: .1rem;
    outline: 0
  }
  .btn{
    width:.3rem;
    height:.3rem;
    position: relative;
    top:.05rem;
    font-size: .3rem;
    cursor: pointer;
  }
  .btn-danger{
    font-size: .2rem;
  }
  .total{
    position: relative;
    float:right;
    right:1rem;
  }
  .table{
    width:90%;
  }
  tr{
    width: 90%;
    height: .6rem;
    // background: red;
    td{
      width:20%
    }
    td:nth-child(1){
      width:10%
    }
    td:nth-child(2){
      width:28%
    }
    td:nth-child(3){
      width:8%
    }
    td:nth-child(4){
      width:22%
    }
    td:nth-child(5){
      width:12%
    }
    td:nth-child(6){
      width:10%;
    }
  }
</style>
